<template>
  <div>
    地址一：<input type="text" class="address-input" readonly
      v-model="addressObj.address1"
      @click="openAddress(1)">
    <p>{{addressObj.province1}} / {{addressObj.city1}} / {{addressObj.district1}}</p>
    地址二：<input type="text" class="address-input" readonly
      v-model="addressObj.address2"
      @click="openAddress(2)">
    <p>{{addressObj.province2}} / {{addressObj.city2}} / {{addressObj.district2}}</p>

    <address-cmp
      ref="addressCmp"
      :addressData="addressData"
      @addressEmit="addressConfirm"
    ></address-cmp>
  </div>
</template>

<script>
import Vue from 'vue'
import addressCmp from '../components/address'
import addressJson from '../common/address'

export default {
  name: 'hello',
  data() {
    return {
      addressProps: {
        province: '',
        city: '',
        district: ''
      },
      addressObj: {
        address1: '广东省 / 深圳市 / 福田区',
        province1: '440000',
        city1: '440100',
        district1: '440103',

        address2: '四川省 / 成都市 / 武侯区',
        province2: '510000',
        city2: '510100',
        district2: '510107',
      },
      addressData: addressJson,
      addressIndex: 1
    }
  },
  components: {
    addressCmp
  },
  methods: {
    openAddress(index) {
      this.addressIndex = index
      switch (index) {
        case 1:
          this.addressProps.province = this.addressObj.province1
          this.addressProps.city = this.addressObj.city1
          this.addressProps.district = this.addressObj.district1
          break;
        case 2:
          this.addressProps.province = this.addressObj.province2
          this.addressProps.city = this.addressObj.city2
          this.addressProps.district = this.addressObj.district2
          break;      
        default:
          break;
      }
      this.$refs.addressCmp.init(this.addressProps)
    },
    // 地址回传
    addressConfirm(values) {
      console.log(values);
      switch (this.addressIndex) {
        case 1:
          this.addressObj.address1 = values[0].name + ' / ' + values[1].name + ' / ' + values[2].name
          this.addressObj.province1 = values[0].code
          this.addressObj.city1 = values[1].code
          this.addressObj.district1 = values[2].code
          break;
        case 2:
          this.addressObj.address2 = values[0].name + ' / ' + values[1].name + ' / ' + values[2].name
          this.addressObj.province2 = values[0].code
          this.addressObj.city2 = values[1].code
          this.addressObj.district2 = values[2].code
          break;
        default:
          break;
      }
    }
  },
}
</script>

<style>
.address-input{
  border: 1px solid #bbb;
  border-radius: .4rem;
  height: 2.4rem;
  width: 100%;
  margin: 1rem 0;
  font-size: 1rem;
  padding: 0 .5rem;
  box-sizing: border-box;
}
p{
  margin: 0;
  margin-bottom: 2rem;
}
</style>